<template>
	<div>
		<el-dialog title="数据预览" v-model="visible" width="50%" @close="refreshEmit" >
			<div style="max-height: 400px; overflow: auto">
				<JsonEditorVue v-model="caseResultContent" class="editor" :show-btns="false" :mode="'code'" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave"/>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="refreshEmit">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted,  defineComponent } from 'vue';
import { reportApi } from '/@/api/reportapi'
import JsonEditorVue from 'json-editor-vue3'
export default defineComponent ({
	components: { JsonEditorVue },
	setup(props, ctx) {
		const state = reactive({
			visible: false,
			dialogCaseResult: false,
			caseResultContent: null
		})
		const openDialog = (id:string) => {
			state.visible = true
			reportApi().testTransformSetBySetId(id).then((data) => {
				if (data && data.code === 0) {
					state.caseResultContent = data.data
				} else {
					// 
				}
			})
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false
		}
		const onJsonChange = (value: any) => {}
		const onJsonSave = (value: any) => {}
		return{
			refreshEmit,
			closeDialog,
			openDialog,
			onJsonChange,
			onJsonSave,
			...toRefs(state),
		}
	}
})
</script>